<template>
  <div class="goods-item"
       @click="itemClick">
    <img v-lazy="showImage"
         alt=""
         @load="imageLoad">
    <div>
      <p>{{goodsItem.title}}</p>
      <div class="info">
        <span class="price">{{goodsItem.price}}</span>
        <span class="collect">{{goodsItem.cfav}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GoodsListItem',
  props: {
    goodsItem: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  computed: {
    showImage() {
      return this.goodsItem.image || this.goodsItem.show.img
    }
  },
  data() {
    return {

    };
  },
  created() {

  },
  mounted() {

  },
  methods: {
    imageLoad() {
      // 原生监听图片 img.onload = function()
      // vue中监听 @load
      // 监听每一张图片是否加载完成,只要有一张图片加载完成了,执行一次refrsh()
      this.$bus.$emit('itemImageLoad')


      // if (this.$route.path.indexOf('/home')) {
      //   this.$bus.$emit('homeItemImageLoad')
      // } else if (this.$route.path.indexOf('detail')) {
      //   this.$bus.$emit('detailItemImageLoad')
      // }
    },
    itemClick() {
      // query传参
      // this.$router.push({
      //   path:'/detail',
      //   query:{

      //   }
      // })
      this.$router.push('/detail/' + this.goodsItem.iid)
    }
  }
};
</script>

<style scoped>
.goods-item {
  width: 48%;
  padding: 5px;
  font-size: 14px;
}

.goods-item img {
  width: 100%;
  height: 200px;
  border-radius: 5px;
}

.goods-item p {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}

.info {
  display: flex;
  justify-content: center;
}

.price {
  color: var(--color-tint);
  margin-left: -10px;
  margin-right: 5px;
}

.collect {
  display: flex;
  justify-content: center;
  align-items: center;
}

.collect::before {
  content: "";
  display: block;
  width: 15px;
  height: 90%;
  margin-top: -2px;
  background: url("~assets/img/common/collect.svg") no-repeat;
  background-size: cover;
}
</style>
